<template>
	<div class="trend_manage">
		<Row class="trend_manage_layout">
			<Col span="6" style="height: 100%;">
			<div style="color: #2FB5B7;">动态管控</div>
			<div class="bi_box_title">在施风险: {{dtgkData.totalZsfx || 0}}项</div>
			<div style="height:calc(100% - 20px);">
				<pie-echarts pieid="zsfxId" piename="在施风险" :piecolor="pieColorFour" :piedata="dtgkData.zsfxPie"></pie-echarts>
			</div>
			</Col>
			<Col span="18" style="height: 100%;">
			<bar-echarts :btnhidden="btnHidden" barid="dtgkId" @barclick="dtgkClick" @barbtnchange="changeDtgkData" :barx="dtgkData.barData.xData"
			 :bary="dtgkData.barData.yData"></bar-echarts>
			</Col>
		</Row>
		<Row class="trend_manage_layout">
			<Col span="6" style="height: 100%;width: calc(25% + 120px);">
			<div class="bi_box_title">过程管控: {{dtgkData.totalGcgk || 0}}项</div>
			<div class="course_manage1">
				<pie-echarts pieid="gcgk1" piename="过程管控" :piecolor="pieColorTwo" :piedata="dtgkData.gcgkPie1"></pie-echarts>
			</div>
			<div class="course_manage2">
				<pie-echarts pieid="gcgk2" piename="过程管控" :piecolor="pieColorTwo" :piedata="dtgkData.gcgkPie2"></pie-echarts>
			</div>
			</Col>
			<Col span="18" style="height: 100%;width:calc(75% - 120px);">
			<line-echarts lineid="gcgkline" linetype="twoLine" :linename="['管控数据','管控到位数据']" :linedatax="dtgkData.lineData.lineDataX"
			 :linedatay="dtgkData.lineData.lineDataY" :linedatay1="dtgkData.lineData.lineDataY1"></line-echarts>
			</Col>
		</Row>
	</div>
</template>


<script>
	import BarEcharts from '%/modules/bi/BarEcharts'
	import PieEcharts from '%/modules/bi/PieEcharts'
	import LineEcharts from '%/modules/bi/LineEcharts'
	export default {
		name: 'bi-fxxh',
		components: {
			BarEcharts,
			PieEcharts,
			LineEcharts
		},
		props: ['bidate'],
		created() {
			//集团用户
			this.btnHidden = this.personType === 1 ? false : true;
			this.getDtgkData(0);
		},
		mounted() {},
		data() {
			return {
				userDetail: JSON.parse(localStorage.getItem('userList')),
				personType: JSON.parse(localStorage.getItem('personType')),
				pieColorFour: ['#ED4C46', '#F49F42', '#EEDD78', '#3090B8'],
				pieColorTwo: ["#8689B4", "#81C7CA"],
        orgType: 1,
				//动态管控
				dtgkData: {
					totalZsfx: 0,
					barData: {
						xData: [],
						yData: {
							firstRisk: [],
							secondRisk: [],
							thirdRisk: [],
							fourthRisk: []
						}
					},
					lineData: {
						lineDataX: [],
						lineDataY: [],
						lineDataY1: []
					},
					zsfxPie: [],
					gcgkPie1: [],
					gcgkPie2: []
				},

			}
		},
		methods: {
			// 获取动态管控
			getDtgkData(index,date) {
        if(index!==null){
           this.orgType = index;
        }

				this.dtgkData = {
					totalZsfx: 0,
					barData: {
						xData: [],
						yData: {
							firstRisk: [],
							secondRisk: [],
							thirdRisk: [],
							fourthRisk: []
						}
					},
					lineData: {
						lineDataX: [],
						lineDataY: [],
						lineDataY1: []
					},
					zsfxPie: [],
					gcgkPie1: [],
					gcgkPie2: []
				};
				let reqData = {
					type: this.orgType,
					controlTime:date || this.bidate
				}
				// let reqUrl = this.personType === 1 ? "getDtgkData" : "getDtgkDetailData";
				this.$api.bi.getDtgkData(reqData).then(res => {

					if (res.code === 200) {
// 						res.data.secondStatistics = [{
// 							"id": "433453172657491968",
// 							"name": "第一工程公司（简称）",
// 							"firstLevel": 5,
// 							"secondLevel": 1,
// 							"thirdLevel": 1,
// 							"fourthLevel": 2,
// 							"type": ""
// 						}, {
// 							"id": "436576044632510464",
// 							"name": "业务第一工程公司（简称）",
// 							"firstLevel": 1,
// 							"secondLevel": 0,
// 							"thirdLevel": 0,
// 							"fourthLevel": 2,
// 							"type": ""
// 						}]
						this.dtgkData.totalZsfx = res.data.firstStatistics.total;
						this.dtgkData.totalGcgk = res.data.thirdStatistics.total;
						this.dtgkData.secondStatistics = res.data.secondStatistics;
						this.dtgkData.zsfxPie = [{
								value: res.data.firstStatistics.firstLevel || 0,
								name: 'I级风险',
							},
							{
								value: res.data.firstStatistics.secondLevel || 0,
								name: 'II级风险'
							},
							{
								value: res.data.firstStatistics.thirdLevel || 0,
								name: 'III级风险'
							},
							{
								value: res.data.firstStatistics.fourthLevel || 0,
								name: 'IV级风险'
							}
						];
						res.data.secondStatistics.forEach((item) => {
							this.dtgkData.barData.xData.push(item.name);
							this.dtgkData.barData.yData.firstRisk.push(item.firstLevel);
							this.dtgkData.barData.yData.secondRisk.push(item.secondLevel);
							this.dtgkData.barData.yData.thirdRisk.push(item.thirdLevel);
							this.dtgkData.barData.yData.fourthRisk.push(item.fourthLevel);
						});
						this.dtgkData.gcgkPie1 = [{
								value: res.data.thirdStatistics.first ? (res.data.thirdStatistics.first.doCount ? res.data.thirdStatistics.first
									.doCount : 0) : 0,
								name: '已管控',
							},
							{
								value: res.data.thirdStatistics.first ? (res.data.thirdStatistics.first.unDoCount ? res.data.thirdStatistics
									.first.unDoCount : 0) : 0,
								name: '未管控'
							}
						];
						this.dtgkData.gcgkPie2 = [{
								value: res.data.thirdStatistics.second ? (res.data.thirdStatistics.second.doCount ? res.data.thirdStatistics
									.second.doCount : 0) : 0,
								name: '管控到位',
							},
							{
								value: res.data.thirdStatistics.second ? (res.data.thirdStatistics.second.unDoCount ? res.data.thirdStatistics
									.second.unDoCount : 0) : 0,
								name: '管控不到位'
							}
						];
// 						res.data.fourthStatistics=[
// 							{"name":"2020-01-01",value:[3,5]},
// 							{"name":"2020-01-02",value:[3,5]},
// 							{"name":"2020-01-03",value:[3,5]},
// 							{"name":"2020-01-04",value:[3,5]}
// 						];
//
						res.data.fourthStatistics.forEach((item) => {
							this.dtgkData.lineData.lineDataX.push(item.name);
							this.dtgkData.lineData.lineDataY.push(item.value[0]);
							this.dtgkData.lineData.lineDataY1.push(item.value[1]);
						})
            console.log(this.dtgkData.lineData)
					} else {
						this.$Message.error(res.message)
					}
				})
			},
			changeDtgkData(index) {
				this.dtgkData.barData = {
					xData: [],
					yData: {
						firstRisk: [],
						secondRisk: [],
						thirdRisk: [],
						fourthRisk: []
					}
				};
        this.orgType = index;
				let reqData = {
					type: index,
					controlTime: this.bidate
				}
				this.$api.bi.changeDtgkData(reqData).then(res => {
					if (res.code === 200) {
            this.dtgkData.secondStatistics = res.data.secondStatistics;
						res.data.secondStatistics.forEach((item) => {
							this.dtgkData.barData.xData.push(item.name);
              this.dtgkData.barData.yData.firstRisk.push(item.firstLevel);
              this.dtgkData.barData.yData.secondRisk.push(item.secondLevel);
              this.dtgkData.barData.yData.thirdRisk.push(item.thirdLevel);
              this.dtgkData.barData.yData.fourthRisk.push(item.fourthLevel);
						})
					} else {
						this.$Message.error(res.message)
					}
				})

			},
			//动态管控详情
			dtgkClick(index, value) {
				let id = this.dtgkData.secondStatistics[index].id;
				this.$emit('dtgkclick', id, value, this.orgType)
			},


		}
	}
</script>

<style scoped lang="scss">
	.trend_manage {
		height: 100%;
		width: calc(65% - 7.5px);
		position: relative;
		background-image: url('../../../../src/assets/images/bi/trend_manage.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 19px 15px;
		color: #fff;
		box-sizing: border-box;

		.trend_manage_layout {
			height: 50%;
			position: relative;
		}

		.bi_box_title {
			color:#2FB5B7;
			font-size: 13px;
			margin-top: 5px;
		}

		.course_manage1 {
			height: 90%;
			width: calc(100% - 120px);
			float: left;
		}

		.course_manage2 {
			height: 70%;
			width: 120px;
			float: right;
			margin-top: 7%;
		}
	}
</style>
